<template>
  <div class="home">
    <div>
      <el-button style="margin-left: 30px;margin-top: 30px" type="success" @click="open"> 添加库位</el-button>
    </div>
    <div style="text-align: center;margin-top: 30px;">
      <el-table
        :data="warehouse_option.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        style="width: auto;margin-bottom: 20px;"
        row-key="id"
        border
        @selection-change="handleCurrentChange"
      >
        <el-table-column
          prop="value"
          label="id">
        </el-table-column>
        <el-table-column
          prop="label"
          label="仓库">
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: center;margin-top: 30px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
                     :total="this.warehouse_option.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { warehouse_list } from '../../api/other'
  import { add_warehouse } from '../../api/other'
  export default {
    name: 'stock',
    data(){
      return{
        user:true,
        warehouse_option:[],
        list:[],
        pagesize:10,
        currentPage:1
      }
    },
    mounted() {
      this.warehouse()
    },
    methods:{
      warehouse() {
        warehouse_list().then(res => { // 调用导入的方法进行查询
          if (res.code === 20000) {
            this.warehouse_option = []
            for (let index = 0; index < res.options.length; index++) {
              this.warehouse_option.push({ value : "" ,label : ""});
              this.warehouse_option[index].value= res.options[index][0];
              this.warehouse_option[index].label= res.options[index][1];
            }
            console.log(this.warehouse_option)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      handleSizeChange: function (size) {
        this.pagesize = size;
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
      },
      open() {
        this.$prompt('请输入库位名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          add_warehouse({'data':value})
          location.reload();
        })
        ;
      }
    }
  }
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
